<extend name="Public/base" />

<block name="body">
    <form method="POST" id="form1" action="">
        <!-- 标题栏 -->
        <div class="main-title">
            <h2>
                {$title}
            </h2>
        </div>
        <div class="row">
            <div class="col-lg-12 row">
                <div class="col-lg-12 text-center"><span class="text-center text-info" style="font-size: 20px;">报损分类统计</span></div>
                <div class="col-lg-12 text-center">
                    <label>
                        <canvas id="myChart" style="width: 80%;height: 260px;"></canvas>
                    </label>
                </div>
                <div class="col-lg-12">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>货别</th>
                            <th>颜色</th>
                            <th>报损数量</th>
                            <th>报损比例</th>
                        </tr>
                        </thead>
                        <volist name="_classRes" id="vo">
                            <tr>
                                <td>
                                    <switch name="vo.class_no">
                                        <case value="1">原包装</case>
                                        <case value="2">正价商品</case>
                                        <case value="3">榨汁商品</case>
                                        <case value="4">福利商品</case>
                                    </switch>
                                </td>
                                <td id="data{$i}">▃▃▃</td>
                                <td>{$vo.cnt}</td>
                                <td>{$vo['cnt']*100/$vo['total']|number_format}%</td>
                            </tr>
                        </volist>
                        <tr style="font-size: 18px;font-weight: 700;border-top: 1px solid black">
                            <td colspan="3">总计</td>
                            <td>{$vo.total}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--<div class="col-lg-12 row">-->
                <!--<div class="col-lg-12 text-center"><span class="text-center text-info" style="font-size: 20px;">报损方式比例图</span></div>-->
                <!--<div class="col-lg-12 text-center">-->
                    <!--<canvas id="myChart2"   style="width: 100%;height: 130px;"></canvas>-->
                <!--</div>-->
                <!--<div class="col-lg-12">-->
                    <!--<table class="table table-hover">-->
                        <!--<thead>-->
                        <!--<tr>-->
                            <!--<th>报损方式</th>-->
                            <!--<th>颜色</th>-->
                            <!--<th>报损数量</th>-->
                            <!--<th>报损比例</th>-->
                        <!--</tr>-->
                        <!--</thead>-->
                        <!--<volist name="_typeList" id="vo">-->
                            <!--<tr>-->
                                <!--<td>{$vo.loss_type}</td>-->
                                <!--<td id="typedata{$i}">▃▃▃</td>-->
                                <!--<td>{$vo.typeCnt}</td>-->
                                <!--<td>{$vo['typeCnt']*100/$vo['total']|number_format=###,2}%</td>-->
                            <!--</tr>-->
                        <!--</volist>-->
                        <!--<tr style="font-size: 18px;font-weight: 700;border-top: 1px solid black">-->
                            <!--<td colspan="3">总计</td>-->
                            <!--<td>{$vo.total}</td>-->
                        <!--</tr>-->
                    <!--</table>-->
                <!--</div>-->
            <!--</div>-->
        </div>
        <div class="data-table table-striped">
        </div>

    </form>
</block>

<block name="script">
    <script type="text/javascript" src="__JS__/Chart/Chart.min.js"></script>
    <script type="text/javascript">
        var areaObj={$classRes};
        var colorArr=['#F38630','#E0E4CC','#69D2E7','#EEC900','#EE6363','#7EC0EE'];
        var reasonArr=[];
        for(var i=0;i<areaObj.length;i++){
            $("#"+"data"+String(i+1)).css('color',colorArr[i]);
            var obj = {
                value:areaObj[i]['cnt'],
                color:colorArr[i]
            }
            reasonArr.push(obj);
        }
        var ctx = document.getElementById("myChart").getContext("2d");
        var myNewChart = new Chart(ctx).Pie(reasonArr);
        highlight_subnav('{:U('Loss/lossdaily')}');
    </script>
</block>
